<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>美妆商城</title>
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/Jquery.js"></script>
    <link rel="stylesheet" href="../css/swiper-bundle.css">
</head>
<style type="text/css">
    .nav_swiper-pagination {
        --swiper-pagination-color: #00ff33;
        /* 两种都可以 */
    }
</style>

<body>
    <div class="mzsc">
        <div class="mzsc_Content">
            <div class="top">
                <div class="top_bx">
                    <div class="wel cf">
                        <p>您好 欢迎来到美妆商城!</p>
                        <a href="JavaScript:;">请登录</a>
                        <a href="file:///D:/study/practise/mzsc_new/html/register.html">立即注册</a>
                    </div>
                    <div class="top_nav">
                        <a href="javascript:;">我的美妆</a>
                        <a href="javascript:;" class="brand_tit">
                            <p class="brand_txt">关注品牌</p>
                        </a>
                        <a href="javascript:;">购物车</a>
                        <a href="javascript:;">收藏夹</a>
                        <a href="javascript:;">商家入驻</a>
                        <a href="javascript:;" style="border-right: none;">帮助中心</a>
                        <div class="top_brand">
                            <a href="javascript:;">科颜氏</a>
                            <a href="javascript:;">雪花秀</a>
                            <a href="javascript:;">馥苗诗</a>
                            <a href="javascript:;">奥比虹</a>
                            <a href="javascript:;">希思黎</a>
                            <a href="javascript:;">迪奥</a>
                            <a href="javascript:;">香奈儿</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="head">
                <div class="head_bx">
                    <div class="head_top">
                        <img src="../images/mzsc.png" alt="图片加载中..">
                        <div class="head_search">
                            <input type="text" placeholder="请输入关键字">
                            <div class="search_btn">
                                <img src="../images/search.png" alt="图片加载中..">
                            </div>
                        </div>
                        <div class="head_ewm cf">
                            <p class="head_txt">关注微信</p>
                            <div class="head_erweima">
                                <img src="../images/二维码.png" alt="图片加载中...">.
                            </div>
                        </div>
                    </div>
                    <div class="head_nav cf">
                        <div class="product_all">
                            <p>所有产品类型</p>
                        </div>
                        <div class="head_product">
                            <a href="javascript:;" class="head_on">首页</a>
                            <a href="javascript:;">官方直售</a>
                            <a href="javascript:;">会员专属</a>
                            <a href="javascript:;">线上专柜</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nav cf">
                <div class="nav_cont">
                    <div class="brand_nav brand_clone cf" style="display: none;">
                        <p><B></B></p>
                        <div>

                        </div>
                    </div>
                </div>
                <div class="nav_carousel">
                    <div class="swiper-container1" style="overflow: hidden;"">
                        <div class=" swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="../images/nav_tab_03.jpg" alt="" class="carousel_img">
                        </div>
                        <div class="swiper-slide">
                            <img src="../images/nav_tab_03.jpg" alt="" class="carousel_img">
                        </div>
                        <div class="swiper-slide">
                            <img src="../images/nav_tab_03.jpg" alt="" class="carousel_img">
                        </div>
                        <div class="swiper-slide ">
                            <img src="../images/nav_tab_03.jpg" alt="" class="carousel_img">
                        </div>
                    </div>
                </div>
                <div class="nav_carousel_l">
                    < </div>
                        <div class="nav_carousel_r">
                            >
                        </div>
                </div>
                <div class="nav_swiper-pagination">
                </div>
            </div>
            <div class="brand">
                <div class="brand_bx">
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                    <div>
                        <img src="../images/pinpailogo.jpg" alt="图片加载中">
                    </div>
                </div>
            </div>
            <div class="smh public">
                <div class="public_bx">
                    <div class="public_head">
                        <div class="public_tit cf">
                            <img src="../images/1F.jpg" alt="">
                            <h3>奢美汇</h3>
                            <p>大牌云集 奢华专属</p>
                        </div>
                        <div class="public_nav">
                            <div>
                                <a href="javascript:;">Kiehl’s/科颜氏</a>
                            </div>
                            <div>
                                <a href="javascript:;">Sulwhasoo/雪花秀</a>
                            </div>
                            <div>
                                <a href="javascript:;">fresh/馥蕾诗</a>
                            </div>
                            <div>
                                <a href="javascript:;">Albion/奥比虹</a>
                            </div>
                            <div>
                                <a href="javascript:;">Sisley/希思黎</a>
                            </div>
                            <div>
                                <a href="javascript:;">FANCL/无添加</a>
                            </div>
                            <div>
                                <a href="javascript:;">Dior/迪奥</a>
                            </div>
                            <div>
                                <a href="javascript:;" style="border-right: none;">Chanel/香奈儿</a>
                            </div>
                        </div>
                    </div>
                    <div class="smh_cont cf">
                        <div class="smh_tab">

                        </div>
                        <div class="smh_right">
                            <div>
                                <img src="../images/smh_img_03.jpg" alt="">
                            </div>
                            <div>
                                <img src="../images/smh_img_03.jpg" alt="">
                            </div>
                            <div>
                                <img src="../images/smh_img_03.jpg" alt="">
                            </div>
                            <div>
                                <img src="../images/smh_img_03.jpg" alt="">
                            </div>
                            <div>
                                <img src="../images/smh_img_03.jpg" alt="">
                            </div>
                            <div>
                                <img src="../images/smh_img_03.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hf public">
                <div class="public_bx">
                    <div class="public_head">
                        <div class="public_tit cf">
                            <img src="../images/2F.jpg" alt="">
                            <h3>护肤</h3>
                            <p>东方之美</p>
                        </div>
                        <div class="public_nav">
                            <div>
                                <a href="javascript:;">洁面</a>
                            </div>
                            <div>
                                <a href="javascript:;">爽肤水</a>
                            </div>
                            <div>
                                <a href="javascript:;">乳液面霜</a>
                            </div>
                            <div>
                                <a href="javascript:;">面膜</a>
                            </div>
                            <div>
                                <a href="javascript:;">眼部护理</a>
                            </div>
                            <div>
                                <a href="javascript:;">臻美套组</a>
                            </div>
                            <div>
                                <a href="javascript:;" style="border-right: none;">更多>>></a>
                            </div>
                        </div>
                    </div>
                    <div class="hf_cont cf">
                        <div class="hf_tab">

                        </div>
                        <div class="hf_right">
                            <div class="hf_r_t">
                                <img src="../images/h_r_t.jpg" alt="">
                                <img src="../images/h_r_t.jpg" alt="">
                                <img src="../images/h_r_t.jpg" alt="">
                                <img src="../images/h_r_t.jpg" alt="">
                            </div>
                            <div class="hf_r_b">
                                <img src="../images/h_r_b.jpg" alt="">
                                <img src="../images/h_r_b.jpg" alt="">
                                <img src="../images/h_r_b.jpg" alt="">
                                <img src="../images/h_r_b.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cz public">
                <div class="public_bx">
                    <div class="public_head">
                        <div class="public_tit cf">
                            <img src="../images/3F.jpg" alt="">
                            <h3>护肤</h3>
                            <p>彩妆学院开课了！</p>
                        </div>
                        <div class="public_nav">
                            <div>
                                <a href="javascript:;">大牌BB</a>
                            </div>
                            <div>
                                <a href="javascript:;">炫彩甲油</a>
                            </div>
                            <div>
                                <a href="javascript:;">烈焰红唇</a>
                            </div>
                            <div>
                                <a href="javascript:;">大眼睛</a>
                            </div>
                            <div>
                                <a href="javascript:;">美妆工具</a>
                            </div>
                            <div>
                                <a href="javascript:;" style="border-right: none;">更多>>></a>
                            </div>
                        </div>
                    </div>
                    <div class="hf_cont cf">
                        <div class="hf_tab">

                        </div>
                        <div class="hf_right">
                            <div class="hf_r_t">
                                <img src="../images/h_r_t.jpg" alt="">
                                <img src="../images/h_r_t.jpg" alt="">
                                <img src="../images/h_r_t.jpg" alt="">
                                <img src="../images/h_r_t.jpg" alt="">
                            </div>
                            <div class="hf_r_b">
                                <img src="../images/h_r_b.jpg" alt="">
                                <img src="../images/h_r_b.jpg" alt="">
                                <img src="../images/h_r_b.jpg" alt="">
                                <img src="../images/h_r_b.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="xs public">
                <div class="public_bx">
                    <div class="public_head">
                        <div class="public_tit cf">
                            <img src="../images/4F.jpg" alt="">
                            <h3>香水</h3>
                            <p>属于你的味道</p>
                        </div>
                        <div class="public_nav">
                            <div>
                                <a href="javascript:;">香水馆</a>
                            </div>
                            <div>
                                <a href="javascript:;">EDP浓香</a>
                            </div>
                            <div>
                                <a href="javascript:;">EDT淡香</a>
                            </div>
                            <div>
                                <a href="javascript:;">古龙水</a>
                            </div>
                            <div>
                                <a href="javascript:;" style="border-right: none;">更多>>></a>
                            </div>
                        </div>
                    </div>
                    <div class="smh_cont cf">
                        <div class="smh_tab">

                        </div>
                        <div class="smh_right">
                            <div>
                                <img src="../images/smh_img_03.jpg" alt="">
                            </div>
                            <div>
                                <img src="../images/smh_img_03.jpg" alt="">
                            </div>
                            <div>
                                <img src="../images/smh_img_03.jpg" alt="">
                            </div>
                            <div>
                                <img src="../images/smh_img_03.jpg" alt="">
                            </div>
                            <div>
                                <img src="../images/smh_img_03.jpg" alt="">
                            </div>
                            <div>
                                <img src="../images/smh_img_03.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="footer_nav">
                    <div class="fnav_cont">
                        <div>
                            <h3>购物指南</h3>
                            <p>新手指南</p>
                            <p>新手指南</p>
                            <p>新手指南</p>
                            <p>新手指南</p>
                        </div>
                        <div>
                            <h3>关于我们</h3>
                            <p>关于我们</p>
                            <p>加入我们</p>
                            <p>联系我们</p>
                        </div>
                        <div>
                            <h3>支付方式</h3>
                            <p>快捷支付</p>
                            <p>信用卡</p>
                            <p>货到付款</p>
                        </div>
                        <div>
                            <h3>商家服务</h3>
                            <p>商家入驻</p>
                            <p>商家中心</p>
                            <p>物流服务</p>
                        </div>
                        <div>
                            <h3>关注微信</h3>
                            <p class=nav_erweima>
                                <img src="../images/二维码.png" alt="">
                            </p>
                        </div>
                    </div>
                </div>
                <div class="footer_bq">
                    <div class="bq_bx">
                        <div class="bq_nav">
                            <a href="javascript:;">天猫</a>
                            <a href="javascript:;">京东</a>
                            <a href="javascript:;">YunOS</a>
                            <a href="javascript:;">阿里通信</a>
                            <a href="javascript:;">万网</a>
                            <a href="javascript:;">高德</a>
                            <a href="javascript:;">优视</a>
                            <a href="javascript:;">友盟</a>
                            <a href="javascript:;">虾米</a>
                            <a href="javascript:;">天天动听</a>
                        </div>
                        <div class="banquan">
                            Copyright © 2008-2016 vip.com，All Rights Reserved 粤ICP备08114786号
                        </div>
                        <div class="banquan">
                            版权所有 美妆商城
                        </div>
                    </div>
                </div>
            </div>

            <div class="mzsc_right">
                <div class="my_function">
                    <div class="my_mz public_right">
                        <div>我的美妆</div>
                        <img src="../images/my_mz.jpg" alt="">
                    </div>
                    <div class="my_gwc public_right">
                        <div>我的购物车</div>
                        <img src="../images/my_gwc.jpg" alt="">
                    </div>
                    <div class="my_history public_right">
                        <div>我看过的</div>
                        <img src="../images/my_history.jpg" alt="">
                    </div>
                    <div class="my_bornd public_right">
                        <div>关注品牌</div>
                        <img src="../images/my_bornd.jpg" alt="">
                    </div>
                    <div class="my_collect public_right">
                        <div>我的收藏</div>
                        <img src="../images/my_collect.jpg" alt="">
                    </div>
                    <div class="back_top public_right">
                        <div>返回顶部</div>
                        <img src="../images/back_top.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    </div>
</body>
<script src="../js/swiper-bundle.js"></script>
<script src="../js/index.js"></script>

</html>